// Habitat Global Styles
//  --------------------
//
//  Table of Contents:
//
//  1. Page Elements
//  2. Code Overrides
//  3. Buttons
//  4. Typography
//  5. Links
//  6. Images
//  7. Callout Boxes
//  8. Anchor Links
//  9. Global Message
//  10. 404


// 1. Global
// ---------
.page-title {
  @include grid-column-row;
  @include linear-gradient(205deg, #e9f1f7 5%, #dce6ed 100%);
  padding: 1em 1.5em;

  &--heading {
    margin: 0;
  }

  a {
    &.create {
      margin-bottom: .5em;
      margin-top: 1.5em;
    }
  }

  p {
    color: $hab-gray-dark;
    margin-top: 1em;
    max-width: 32em;
  }
}

.page-body {
  padding: 1.5em;

  &--title {
    border-bottom: 1px solid $hab-gray-light;
    line-height: rem-calc(48);
    margin-bottom: rem-calc(20);
  }

  &--tip {
    @include shadow-float;
    background-color: $hab-blue;
    color: $hab-white;
    display: inline-block;
    font-style: italic;
    font-weight: 700;
    margin-bottom: 0;
    margin-left: rem-calc(-30);
    padding: rem-calc(10) rem-calc(30);
  }
}

.main-content--button-nav {
  list-style: none;
  margin: 0;

    li {
      display: inline-block;
      margin-left: rem-calc(30);
      margin-top: 0;
      vertical-align: top;

      a:not(.button) {
        color: $medium-gray;

        &:hover {
          text-decoration: underline;
        }
      }

      &:first-child {
        margin: 0;
      }

      + li a:not(.button) {
        display: inline-block;
        margin-top: rem-calc(10);
      }
    }
}

.main-content--version {
  display: block;
  list-style: none;
  margin: rem-calc(-20) rem-calc(10) 0 0;
  text-align: right;

  li {
    display: inline-block;
    margin-left: rem-calc(10);

    a.active {
      font-weight: bold;
    }

    a.active:before {
       content:  "\2713 ";
       padding-right: rem-calc(4);
    }
  }

  + hr {
    margin: rem-calc(15) 0 rem-calc(30);
  }
}

.main-content--link-nav {
  list-style: none;
  margin: 0;

  li:first-child {
    color: lighten($body-font-color, 25%);
    font-size: rem-calc(12);
    margin: rem-calc(30) 0 rem-calc(10);
  }

  a {
    color: $body-font-color;
    font-size: rem-calc(14);
    text-decoration: underline;
  }
}

// 2. Code Overrides
// ---------
pre {
  background-color: $black;
  border: none;
  border-radius: $global-radius;
  color: $hab-gray-light;
  font-size: $code-font-size;
  padding: .6rem;
  overflow-x: scroll;

  code {
    color: $hab-off-white;
    margin: 0;
    padding: rem-calc(0 5 1);
  }

  dd & {
    margin: rem-calc(10) 0 rem-calc(30);
  }
}

.CodeRay {
  @include shadow-float;
  font-family: $code-font-family;
  margin: rem-calc(20) 0 rem-calc(40);
  max-width: 100%;
  padding: .6rem;
  table-layout: fixed;

  pre {
    margin-bottom: 0;
  }

  span {
    color: $hab-off-white !important;
  }

  tbody {
    background-color: transparent;
    border: none;
  }

  tbody td {
    padding: 0;
  }

  .line-numbers {
    width: rem-calc(40);

    pre {
      border-radius: $global-radius+2 0 0 $global-radius+2;
      border-top: 24px solid $hab-gray-light;
    }
  }

  .code pre {
    border-radius: 0 $global-radius+2 $global-radius+2 0;
    border-top: 24px solid $hab-gray-light;
  }
}

code {
  border: 1px solid $light-gray;
  font-size: $code-font-size;
  margin: rem-calc(10 0 30);

  p &,
  li &,
  td &,
  dd & {
    border-radius: $global-radius;
    padding: rem-calc(0 5 1);
    margin: 0 rem-calc(1);
  }
}

// 3. Buttons
// ---------
.button {
  &.secondary {
    color: $hab-gray-dark;
  }
  &.secondary:hover {
    @include shadow-float;
    background-color: darken($hab-gray-light,5);
    color: $hab-gray-dark;
    transition: all .2s;
  }

  &.outline {
    border-radius: 7px;
    background: transparent;
    border: 1px solid $hab-orange;

    &.footer--cta-button {
      box-shadow: none;
      margin-left: rem-calc(20);
      text-shadow: none;

      &:hover {
        @include shadow-float;
        transition: all .2s;
      }
    }
  }
}

.button.cta{
  @include primary-button;

  &.outline {
    background-image: none;
    color: $body-font-color;
    text-shadow: none;
  }
}

// Small text below CTAs
.cta-subtext {
  margin-bottom: 0;
  font-size: rem-calc(12);
  color: $hab-gray;

  a {
    color: inherit;
    text-decoration: underline;
  }
}

.button.slack {
  background-image: url(../images/slack_mark_white_web.png);
  background-repeat: no-repeat;
  background-size: rem-calc(42);
  font-size: rem-calc(16);
  font-weight: bold;
  min-height: rem-calc(44);
  padding-left: rem-calc(40);
}

// 4. Typography Overrides
// ---------
.main-sidebar--heading h4 {
    margin-bottom: rem-calc(10);
    text-transform: uppercase;;
}

h2:not(:first-child) {
  margin-top: rem-calc(40);
}

ol.upper-alpha {
  list-style-type: upper-alpha;
}

ol.lower-alpha {
  list-style-type: lower-alpha;
}

ol.lower-latin {
  list-style-type: lower-latin;
}

ol.lower-roman {
  list-style-type: lower-roman;
}

// 5. Links
// ---------

.back-link {
  display: block;
  margin-top: rem-calc(10);
}

// 6. Images
// ---------

img {
  max-width: 100%;
}

.logo-inline {
  max-height: 2rem;
}

// 7. Callout Boxes
// ---------

.callout-box--container {
  padding: rem-calc(15) rem-calc(60);
}

.callout-box {
  padding: rem-calc(15) rem-calc(30);
  text-align: center;

  p {
    font-size: rem-calc(14);
  }
}

// 8. Anchor Links
// ---------

.anchor:before {
  content: '';
  display: block;
  position: relative;
  width: 0;
  height: 7em;
  margin-top: -7em;
}

// 9. Global Message
// ---------

#global_message {
  background-color: $hab-green;
  color: $white;
  text-align: center;
  padding: rem-calc(10) rem-calc(60);

  a {
    color: $white;
    font-size: rem-calc(14);
  }
}

// 10. 404
// ---------

.error-404 {
  background: url(../images/back-at-it.jpg) center center no-repeat;
  background-size: 50%;
  margin: rem-calc(60) auto;
  min-height: rem-calc(600);

  @include breakpoint(small only) {
    margin-top: rem-calc(100);
    min-height: rem-calc(350);
  }

  h1,
  p {
    margin: 0 auto rem-calc(10);
    max-width: 65%;
    text-align: center;
  }
}
